<template>
    <childLayout activeType="thesisDownload" :showSidebar="false" :lunwenName="thesisInfo.lunwenType">
        <div class="child-content">
            <div class="thesis-header">
                <div class="title-show">
                    <div class="article-icon"> <img src="@/assets/images/article-type-icon.png" alt=""> </div>
                    <div class="article-title">{{ thesisInfo.productName }}</div>
                </div>
                <div class="upgrade-vip"  @click="toRecharge">
                    <div class="upgrade-vip-label">
                        <div class="vip-icon"> <img src="@/assets/images/vip-icon.png" alt=""> </div>
                        <div class="upgrade-vip-text">升级VIP</div>
                    </div>
                    <div class="upgrade-vip-desc">{{ userStore.websiteInfo.vipLowestTxt }}</div>
                </div>
                <div class="thesis-contact-data">
                    <div class="thesis-data-num">
                        <div class="item-num">格式：{{ thesisInfo.fileExt }}</div>
                        <div class="item-num">字数：{{ thesisInfo.numbers }}字</div>
                        <div class="item-num">页数：{{ thesisInfo.pages }}页</div>
                        <div class="item-num">所需积分：{{ thesisInfo.jifen }}分</div>
                        <div class="item-num">上传日期：{{ thesisInfo.createDate }}</div>
                    </div>
                    <div class="thesis-opt">
                        <el-button  @click="toCollectPaper">
                            <span style="color: rgba(5, 11, 32, 1);font-weight: 500;">{{thesisInfo.isCollect == '0' ? '收藏' : '取消收藏'}}</span>
                            <img class="collect-icon" v-if="thesisInfo.isCollect == '1'"
                                src="@/assets/images/star-active.png" alt="">
                            <img class="collect-icon" v-else src="@/assets/images/start-icon.png" alt="">
                        </el-button>
                        <el-button type="primary" v-if="userStore.websiteInfo.downloadButton && thesisInfo.showDownloadBtn" @click="toReadAllText('2')">
                            <span>{{ userStore.websiteInfo.downloadButton }}</span>
                            <span style="margin-left: 2px;" v-if="thesisInfo.isBuy == '0'">
                                ( <img class="score-icon" src="@/assets/images/score-icon.png" alt="">{{
                                    thesisInfo.jifen }} )
                            </span>
                        </el-button>
                        <el-button type="primary" v-if="userStore.websiteInfo.maiduanButton && thesisInfo.showMaiDuanBtn" @click="toReadAllText('3')">
                            <span>{{ userStore.websiteInfo.maiduanButton }}</span>
                            <span style="margin-left: 2px;">
                                ( <img class="score-icon" src="@/assets/images/score-icon.png" alt="">{{
                                    thesisInfo.costPrice }} )
                            </span>
                        </el-button>
                    </div>
                </div>
            </div>
            <div class="thesis-content" id="readContent">
                <!-- <PdfViews :pdfUrl="thesisInfo.pdfUrl" /> -->
                 <!-- <VuePdfApp class="pdf-box" :pdf="thesisInfo.showFile" :config="{
                    toolbar: {
                        toolbarViewerRight: false
                    }
                 }"/> -->
                 <iframe v-if="loadFileUrl" :src="loadFileUrl" frameborder="0" style="width: 100%; height: 100%;"></iframe>

                <div class="to-read-more" v-if="thesisInfo.isBuy == '0'" @click="toReadAllText('1')">
                    {{ userStore.websiteInfo.continueReadTxt }}
                </div>
            </div>
            <div class="thesis-footer">
                <div class="thesis-opt">
                    <el-button @click="toCollectPaper">
                        <span style="color: rgba(5, 11, 32, 1);font-weight: 500;">{{thesisInfo.isCollect == '0' ? '收藏' : '取消收藏'}}</span>
                        <img class="collect-icon" v-if="thesisInfo.isCollect == '1'"
                            src="@/assets/images/star-active.png" alt="">
                        <img class="collect-icon" v-else src="@/assets/images/start-icon.png" alt="">
                    </el-button>
                    <el-button type="primary" v-if="userStore.websiteInfo.downloadButton && thesisInfo.showDownloadBtn"  @click="toReadAllText('2')">
                        <span>{{ userStore.websiteInfo.downloadButton }}</span>
                        <span style="margin-left: 2px;" v-if="thesisInfo.isBuy == '0'">
                            ( <img class="score-icon" src="@/assets/images/score-icon.png" alt="">{{ thesisInfo.jifen }}
                            )
                        </span>
                    </el-button>
                    <el-button type="primary" v-if="userStore.websiteInfo.maiduanButton && thesisInfo.showMaiDuanBtn"  @click="toReadAllText('3')">
                        <span>{{ userStore.websiteInfo.maiduanButton }}</span>
                        <span style="margin-left: 2px;">
                            ( <img class="score-icon" src="@/assets/images/score-icon.png" alt="">{{
                                thesisInfo.costPrice }} )
                        </span>
                    </el-button>
                </div>
                <div class="tips-desc" v-html="userStore.websiteInfo.downloadTip">                   
                </div>
                <div class="to-upgrade-vip">
                    <div class="to-upgrade-btn" @click="toRecharge">
                        <div class="vip-icon"> <img src="@/assets/images/vip-icon.png" alt=""> </div>
                        <div class="vip-label">马上升级成VIP</div>
                    </div>
                    <div class="upgrade-vip-desc">{{ userStore.websiteInfo.vipLowestTxt }}</div>
                </div>
            </div>
        </div>

        <div class="dialog-mask-box" v-if="dialogVisible">
            <div class="dialog-box">
                <div class="dialog-bg"></div>
                <div class="close-dialog" @click="toCloseDialog"> <img src="@/assets/images/close-icon.png" alt=""> </div>
                <div class="dialog-box-content">
                    <div class="dialog-label">您可以通过微信扫描下方二维码快捷支付下载此文档</div>
                    <div class="buy-content">
                        <div class="bug-qr-code">
                            <div class="show-wx-qr-code">
                                <img :src="codeUrl" alt="">
                            </div>
                            <div class="show-wx-pay-label">请使用微信扫码付款</div>
                        </div>
                        <div class="buy-info">
                            <div class="item-vip-price-score">
                                <div class="item-vip-price">￥ <span class="item-vip-price-num">{{
                                    rechargePrice }}</span></div>
                                <div class="item-get-score">得{{ rechargePrice }} <img class="item-score-icon"
                                        src="@/assets/images/score-icon.png" alt=""></div>
                            </div>
                            <div class="show-thesis-info">
                                <div class="show-title">标题：{{ thesisInfo.productName }}</div>
                                <div class="show-title">字数：{{ thesisInfo.numbers }}</div>
                                <div class="show-title">格式：{{ thesisInfo.fileExt }}</div>
                            </div>
                            <div class="to-upgrade-btn" @click="toRecharge">
                                <div class="vip-icon"> <img src="@/assets/images/vip-icon.png" alt=""> </div>
                                <div class="vip-label">升级VIP会员享受更多优惠>></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </childLayout>
</template>

<script setup>
import { ElMessageBox, ElMessage  } from 'element-plus'
import Qrcode from 'qrcode'
import childLayout from "@/layout/childLayout";
import useUserStore from '@/store/modules/user'
import { getPaperDetail, scanCodeBuyIntegral, downloadPaper, buyOutPaper, getOrderPayResult, changeCollect } from '@/api/index'
import { onMounted } from "vue";
import VuePdfApp from "vue3-pdf-app";
import "vue3-pdf-app/dist/icons/main.css"
import { da } from 'element-plus/es/locales.mjs';

const userStore = useUserStore();
const router = useRouter();
const route = useRoute();

const codeUrl = ref('');
const loadFileUrl = ref('');
const thesisInfo = ref({});
const bugType = ref('1'); //1 全文阅读 2 下载 3 买断
const dialogVisible = ref(false);
const pdfScale = ref(1);
const pageNum = ref(1);
const downTime = ref(60);
const orderNo = ref('');
const rechargePrice = ref(0);
const timer = ref(null);

const toRecharge = () => {
    router.push('/vip')
}

const toGetDetail = async () => {
    let res = await getPaperDetail(route.params.id);
    if (res) {
        thesisInfo.value = res.data;
		loadFileUrl.value = decodeURIComponent(res.data.showFile);
        useUserStore().getInfo()
    }
}

const toCollectPaper = async () => {
    let res = await changeCollect({
        objUid: thesisInfo.value.productUid,
        objType: 'good',
    })
    if (res) {
        ElMessage.success(thesisInfo.value.isCollect == '0' ? '收藏成功' : '取消收藏成功')
        toGetDetail();
    }
}

const toReadAllText = (type) => {
    bugType.value = type
    // 先判断积分够不够，不够先买积分，够的话，直接提示购买阅读
    userStore.getInfo().then((res) => {
        let { data } = res
		if (!data){
			ElMessage.error('请先登录再操作！')
			return;
		}
        if(!data.score) {
            data.score = 0
        }
        if(type == '1') {
			if (thesisInfo.value.isBuy=='0'){
				if(data.score < thesisInfo.value.jifen) {
					toBuyIntegral(thesisInfo.value.jifen - data.score)
				}else {
					toComfirmReadAll()
				}
			}else{
				toComfirmReadAll()
			}
        }else if(type == '2') {
			if (thesisInfo.value.isBuy=='0'){
				if(data.score < thesisInfo.value.jifen) {
					toBuyIntegral(thesisInfo.value.jifen - data.score)
				}else {
					toComfirmDownload()
				}
            }else{
				toComfirmDownload()
			}
        }else if(type == '3') {
            if(data.score < thesisInfo.value.costPrice) {
                toBuyIntegral(thesisInfo.value.costPrice - data.score)
            }else {
                toComfirmBuyOut()
            }
        }
        
    })
}

const toComfirmReadAll = () => {
    ElMessageBox.confirm('请确认是否购买阅读全文？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        downloadPaper(thesisInfo.value.productUid).then(res => {
            let { data } = res
            toDownload(data, thesisInfo.value.productName)
            toGetDetail();
        })
    }).catch(() => {
        console.log('cancel');
    });
}

const toComfirmDownload = () => {
    ElMessageBox.confirm('请确认是否下载论文？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        downloadPaper(thesisInfo.value.productUid).then(res => {
            let { data } = res
            toDownload(data, thesisInfo.value.productName)
            toGetDetail();
        })
    }).catch(() => {
        console.log('cancel');
    });
}

const toComfirmBuyOut = () => {
    ElMessageBox.confirm('请确认是否买断论文？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
         buyOutPaper(thesisInfo.value.productUid).then(res => {
            let { data } = res
            toDownload(data, thesisInfo.value.productName)
            toGetDetail();
        })
    }).catch(() => {
        console.log('cancel');
    })
}

const toDownload = (url, name) => {
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.style.display = 'none';
    a.href = url;
    a.download = `${name}_${new Date().getTime()}`;
    a.click();
}

const toBuyIntegral = async (score) => {
	// rechargePrice.value = bugType.value == '3'? thesisInfo.value.costPrice :  thesisInfo.value.jifen;
    rechargePrice.value = score;
    let res = await scanCodeBuyIntegral({
        score,
        payMethod: 'wechat'
    });
    if (res) {
        let { data } = res;
        orderNo.value = data.orderNo;		
        Qrcode.toDataURL(data.code_url).then(url => {
            codeUrl.value = url; 
            dialogVisible.value = true;
            toCountDown()
        })
    }
}

const toPay = async () => {
    let res = await getOrderPayResult(orderNo.value);
    if (res) {
        let { data } = res
        if (data.payStatus == '1') {
            ElMessage.success('支付成功')
            clearTimeout(timer.value);
            toCloseDialog();
            toGetDetail()
        }
    }
}

const toCountDown = () => {
    if (downTime.value > 0) {
        downTime.value--;
        toPay()
        timer.value = setTimeout(() => {
            toCountDown();
        }, 3000);
    } else {
        toCloseDialog();
    }
}

const toCloseDialog = () => {
    dialogVisible.value = false;
    codeUrl.value = '';
    orderNo.value = '';
    downTime.value = 60;
    clearTimeout(timer.value);
    timer.value = null;
}

onMounted(async () => {
    toGetDetail();

    document.getElementById('readContent').addEventListener('contextmenu', (event) => {
        event.preventDefault()
    })
    
})
</script>

<style lang="scss" scoped>
.thesis-header {
    border-radius: 8px;
    background: rgba(245, 245, 245, 1);
    padding: 12px 16px 16px 12px;
    position: relative;
    margin-bottom: 24px;

    .upgrade-vip {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 121px;
        height: 48px;
        background-image: url("@/assets/images/upgradeVip-bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 7px;
        border-radius: 0 8px 8px 0;
        padding-left: 12px;
        cursor: pointer;

        .upgrade-vip-label {
            display: flex;
            align-items: center;
            justify-content: center;

            .vip-icon {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }

            .upgrade-vip-text {
                color: rgba(159, 94, 10, 1);
                font-size: 15px;
                font-weight: 900;
                line-height: 20px;
            }
        }

        .upgrade-vip-desc {
            color: rgba(159, 94, 10, 1);
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            text-align: center;
        }
    }

    .title-show {
        display: flex;
        align-items: center;
        padding-right: 130px;
        margin-bottom: 16px;

        .article-icon {
            width: 20px;
            height: 20px;
        }

        .article-title {
            margin-left: 8px;
            color: rgba(5, 11, 32, 1);
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
        }
    }

    .thesis-contact-data {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .thesis-data-num {
            display: flex;
            align-items: center;
            color: rgba(145, 153, 163, 1);
            font-size: 14px;
            font-weight: 400;
            line-height: 30px;

            .item-num {
                &:not(:last-child) {
                    padding-right: 16px;
                    border-right: 1px solid rgba(233, 233, 233, 1);
                    margin-right: 16px;
                }
            }

        }

        .thesis-opt {
            display: flex;

            .collect-icon {
                width: 16px;
                height: 16px;
                margin-left: 10px;
            }

            .score-icon {
                display: inline-block;
                vertical-align: middle;
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }
        }
    }
}

.thesis-content {
    position: relative;
    border: 1px solid rgba(233, 233, 233, 1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 1);
    // padding: 36px 152px 100px 40px;
    height: 690px;
    overflow: hidden;


    .thesis-content-box {
        width: 912px;
    }

    .thesis-content-title {
        color: rgba(5, 11, 32, 1);
        font-size: 20px;
        font-weight: 700;
        line-height: 28px;
        text-align: center;
        margin-bottom: 48px;
    }

    .item-content {
        font-size: 14px;
        color: rgba(94, 94, 94, 1);
        line-height: 24px;

        &:not(:last-child) {
            margin-bottom: 16px;
        }

        .item-title {
            font-weight: 700;
            color: rgba(5, 11, 32, 1);
        }
    }

    .to-read-more {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 500;
        width: 100%;
        height: 40px;
        border: 1px solid rgba(51, 133, 255, 1);
        border-radius: 0px 0px 16px 16px;
        background: rgba(51, 133, 255, 0.1);
        text-align: center;
        line-height: 38px;
        color: rgba(51, 133, 255, 1);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        background: #fff;
    }

    .content-nav {
        position: absolute;
        top: 44px;
        right: 14px;
        width: 138px;
        height: auto;

        &::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            height: 100%;
            width: 2px;
            background: rgba(245, 245, 245, 1);
        }

        .item-nav {
            height: 22px;
            width: 100%;
            padding: 0 10px 0 28px;
            line-height: 22px;
            font-size: 15px;
            color: rgba(94, 94, 94, 1);
            cursor: pointer;

            &:not(:last-child) {
                margin-bottom: 12px;
            }
        }

        .item-nav-active {
            position: relative;
            color: rgba(24, 144, 255, 1);

            &::before {
                content: '';
                width: 8px;
                height: 8px;
                border-radius: 50%;
                border: 2px solid rgba(24, 144, 255, 1);
                position: absolute;
                top: 7px;
                left: 8px;
            }
        }
    }
}

.thesis-footer {
    border-radius: 8px;
    background: rgba(245, 245, 245, 1);
    padding: 16px;
    position: relative;
    margin-top: 30px;

    .thesis-opt {
        display: flex;
        margin-bottom: 16px;

        .collect-icon {
            width: 16px;
            height: 16px;
            margin-left: 10px;
        }

        .score-icon {
            display: inline-block;
            vertical-align: middle;
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }
    }

    .tips-desc {
        color: rgba(145, 153, 163, 1);
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
    }

    .to-upgrade-vip {
        position: absolute;
        top: 16px;
        right: 11px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;

        .to-upgrade-btn {
            width: 160px;
            height: 32px;
            border-radius: 8px;
            background: rgba(248, 216, 184, 1);
            display: flex;
            align-items: center;
            justify-content: center;

            .vip-icon {
                width: 16px;
                height: 16px;
            }

            .vip-label {
                color: rgba(159, 94, 10, 1);
                font-size: 15px;
                font-weight: 900;
                line-height: 24px;
                margin-left: 10px;
            }
        }

        .upgrade-vip-desc {
            color: rgba(159, 94, 10, 1);
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            margin-top: 8px;
        }
    }
}


.dialog-mask-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 107001;
    display: none;
    display: flex;
    align-items: center;
    justify-content: center;

    .dialog-box {
        width: 702px;
        height: auto;
        border: 1px solid rgba(209, 227, 255, 1);
        border-radius: 8px;
        background: rgba(255, 255, 255, 1);
        position: relative;
    }

    .dialog-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 200px;
        background: linear-gradient(180.00deg, rgba(208, 226, 255, 1), rgba(255, 255, 255, 0) 100%);
    }

    .close-dialog {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 24px;
        height: 24px;
        cursor: pointer;
        z-index: 20;
    }

    .dialog-box-content {
        position: relative;
        z-index: 10;
        padding: 32px 32px 24px 32px;

        .dialog-label {
            color: rgba(5, 11, 32, 1);
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
            margin-bottom: 24px;
        }

        .buy-content {
            display: flex;
            align-items: center;

            .bug-qr-code {
                .show-wx-qr-code {
                    width: 177px;
                    height: 177px;
                    background: #000;
                    margin-bottom: 32px;
                }

                .show-wx-pay-label {
                    color: rgba(159, 94, 10, 1);
                    font-size: 15px;
                    font-weight: 900;
                    line-height: 24px;
                    text-align: center;
                }
            }

            .buy-info {
                padding: 45px 0 16px 30px;
                margin-left: 28px;
                border-left: 1px solid rgba(215, 230, 255, 1);

                .item-vip-price-score {
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                    padding-bottom: 28px;
                    border-bottom: 1px solid rgba(215, 230, 255, 1);

                    .item-vip-price {
                        display: flex;
                        align-items: flex-end;
                        color: rgba(5, 11, 32, 1);
                        font-size: 14px;
                        font-weight: 700;
                        line-height: 0.1;
                        margin-right: 16px;

                        .item-vip-price-num {
                            font-size: 48px;
                            line-height: 30px;
                        }
                    }

                    .item-get-score {
                        display: flex;
                        align-items: center;
                        color: rgba(5, 11, 32, 1);
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 1;
                        position: relative;
                        top: 5px;

                        .item-score-icon {
                            width: 16px;
                            height: 16px;
                            margin-left: 3px;
                        }
                    }
                }

                .show-thesis-info {
                    color: rgba(145, 153, 163, 1);
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 24px;
                    margin: 36px 0 28px;
                }

                .to-upgrade-btn {
                    width: 252px;
                    height: 32px;
                    border-radius: 8px;
                    background: rgba(248, 216, 184, 1);
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .vip-icon {
                        width: 16px;
                        height: 16px;
                    }

                    .vip-label {
                        color: rgba(159, 94, 10, 1);
                        font-size: 15px;
                        font-weight: 900;
                        line-height: 24px;
                        margin-left: 10px;
                    }
                }
            }
        }
    }
}
</style>